import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '09 BottomNavigationBar-底部导按钮',
      home: Scaffold(
        appBar: AppBar(
          title: Text('09 BottomNavigationBar-底部导按钮'),
        ),
          //撑下去
          body: Container(
            width: 200.0,
            height: 500.0,
          ),
          bottomNavigationBar:DemoPage(),
      ),
    );
  }
}


class DemoPage extends StatefulWidget{
  @override
  DemoPageState createState() => DemoPageState();
}

class DemoPageState extends State<DemoPage>{
  int _currentIndex = 1;

  void _onItemTapped(int index){
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    //底部导航按钮项
    return BottomNavigationBar(
      //底部按钮类型，固定
      //   type: BottomNavigationBarType.fixed,
      //移位，默认白色
      type: BottomNavigationBarType.shifting,
        iconSize: 24.0,
        onTap: _onItemTapped,
        currentIndex: _currentIndex,
        //当类型为fiexed时 选择颜色
        fixedColor: Colors.red,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(title: Text('聊天',style: TextStyle(color: Colors.blue),),icon: Icon(Icons.chat,color: Colors.blue,)),
          BottomNavigationBarItem(title: Text('首页',style: TextStyle(color: Colors.blue),),icon: Icon(Icons.home,color: Colors.blue,)),
          BottomNavigationBarItem(title: Text('加',style: TextStyle(color: Colors.blue),),icon: Icon(Icons.add,color: Colors.blue,)),
        ],
    );
  }
}